<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="searchInfo"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="Registration Time:" prop="reg_time">
              <el-date-picker
                type="daterange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                v-model="searchInfo.reg_time"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="MenarcheAge:" prop="menarcheAge">
              <el-switch
                v-model="searchInfo.menarcheAge"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="select.menarcheAge"
                @change="otherDisabled('menarcheAge')"
              >
              </el-switch>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="FirstBirth:" prop="firstBirth">
              <el-switch
                v-model="searchInfo.firstBirth"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="select.firstBirth"
                @change="otherDisabled('firstBirth')"
              >
              </el-switch>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="BreastBiopsiesNum:" prop="breastBiopsiesNum">
              <el-switch
                v-model="searchInfo.breastBiopsiesNum"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="select.breastBiopsiesNum"
                @change="otherDisabled('breastBiopsiesNum')"
              >
              </el-switch>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="6" :offset="18">
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <br />
    </div>
    <div :style="{ height: '530%', width: '100%' }" ref="myfunnelDiagram"></div>
  </div>
</template>

<script>
export default {
  name: "FunnelDiagram",
  data() {
    return {
      searchInfo: {
        reg_time: [],
        menarcheAge: false, //月经初产年龄
        firstBirth: false, //初产年龄
        breastBiopsiesNum: false, //乳腺活检次数
      },
      select: {
        menarcheAge: false,
        firstBirth: false,
        breastBiopsiesNum: false,
      },
      option: {
        title: {
          text: "Population Distribution Under Different Factors",
          textStyle: {
            fontSize: 25,
          },
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          data: ["15~30", "31~45", "46~60", "61~75", "76~90"],
          left: "right",
          orient: "vertical",
        },
        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              //value是占比
              { value: 60, name: "15~30" },
              { value: 40, name: "46~60" },
              { value: 20, name: "61~75" },
              { value: 80, name: "76~90" },
              { value: 100, name: "31~45" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.funnelDiagram();
  },
  methods: {
    funnelDiagram() {
      let myChart = this.$echarts.init(this.$refs.myfunnelDiagram); //这里是为了获得容器所在位置
      myChart.setOption(this.option);
    },
    //清空搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.select.firstBirth = false;
      this.select.breastBiopsiesNum = false;
      this.select.menarcheAge = false;
    },
    otherDisabled(value) {
      if (value == "menarcheAge") {
        this.select.firstBirth = true;
        this.select.breastBiopsiesNum = true;
      } else if (value == "firstBirth") {
        this.select.menarcheAge = true;
        this.select.breastBiopsiesNum = true;
      } else if (value == "breastBiopsiesNum") {
        this.select.menarcheAge = true;
        this.select.firstBirth = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  border-radius: 25px;
  background: #581d1d42;
}
.box-card {
  border-radius: 25px;
  background: #d6d5d542;
}
</style>